<template>
  <div>
    <MyNav>我的</MyNav>
    <header>
      <div>
        <!--头像-->
        <div class="pic">
          <van-image
              round
              width="5rem"
              height="5rem"
              :src='$store.state.userInfo.avatar'
              fit="cover"
          />
        </div>
        <!--   昵称-->
        <div class="nickname">{{$store.state.userInfo.userName}}</div>
<!--        简介-->
        <p style="text-align: center;font-size: 14px">{{$store.state.userInfo.remark}}
<!--          登录可点-->
         <van-icon name="edit" @click="showPopup1" v-if="$store.state.islogin"/>
<!--          未登录不可点-->
         <van-icon name="edit" @click="tips" v-else/>
          <van-popup v-model="show1" style="width: 250px">
            <van-cell-group>
              <van-form @submit="onSubmit1">
                <van-field
                    v-model="remark"
                    name="remark"
                    label="简介"
                    placeholder="请输入简介"
                    :rules="[{ required: true, message: '请填写要修改的简介' }]"
                />
                <div style="margin: 16px;">
                  <van-button round block type="info" native-type="submit" style="color:#67ABD6;font-size: 18px;background-color: #fff;border: 1px solid #67ABD6; ">提交</van-button>
<!--                  <van-button round block type="info" native-type="submit" >提交</van-button>-->
                </div>
              </van-form>
            </van-cell-group>
          </van-popup>
          </p>
      </div>
    </header>
    <!--  登录状态的  点赞关注收藏-->
    <van-row v-if="$store.state.islogin" style="margin: 20px 0">
      <van-col span="8">

          <div @click="likes">
            <van-icon name="like" color="red" size="30px"/>
          </div>
          点赞

      </van-col>
      <van-col span="8">
       <router-link to="/collection" style="color: black">
         <div>
           <van-icon name="star" color="gold" size="30px"/>
         </div>
         收藏
       </router-link>
      </van-col>
      <van-col span="8">
        <router-link to="/attend" style="color: black">
          <div>
            <van-icon name="friends" color="orange" size="30px"/>
          </div>
          订阅专栏
        </router-link>
      </van-col>
    </van-row>
<!--    未登录状态的 点赞关注收藏-->
    <van-row v-else style="margin: 20px 0">
      <van-col span="8">
          <div @click="tips">
            <van-icon name="like" color="red" size="30px"/>
          </div>
          点赞
      </van-col>
      <van-col span="8">
         <div  @click="tips">
           <van-icon name="star" color="gold" size="30px"/>
         </div>
         收藏
      </van-col>
      <van-col span="8">
          <div  @click="tips">
            <van-icon name="friends" color="orange" size="30px"/>
          </div>
        订阅专栏
      </van-col>
    </van-row>
    <!--    链接-->
    <div class="link">
<!--      登录后的修改-->
      <van-cell title="修改个人信息" is-link to="/person" v-if="$store.state.islogin"/>
<!--      未登录不能修改-->
      <van-cell title="修改个人信息" @click="tips" is-link v-else/>
      <van-cell is-link @click="showPopup">关于我们</van-cell>
      <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" >
        <p class="aboutUs">
          我们是发际线总是在和我作队
        </p>
      </van-popup>
      <van-cell title='查询天气' @click="show2 = true" />
      <van-overlay :show="show2" @click="show2 = false">
        <div class="wrapper" @click.stop>
          <div class="block" style="padding: 30px;box-sizing: border-box;border-radius: 10px ">
            <div class="backcolor">
              <input type="text" v-model="city" placeholder="最后加市" style="width: 100px">
              <button @click="press" style="border-radius: 10px">查询</button>
              <p>地址：{{list.address}}</p>
              <p>时间：{{list.reportTime}}</p>
              <p>湿度：{{list.humidity}}</p>
              <p>温度：{{list.temp}}</p>
              <p>天气：{{list.weather}}</p>
              <p>风向：{{list.windDirection}}</p>
              <p>风力：{{list.windPower}}</p>
              <div style="width: 100px;margin: auto">
                <button @click="show2 = false" style="width: 100px;border-radius: 10px">关闭</button>
              </div>
            </div>
          </div>
        </div>
      </van-overlay>
      <van-cell title='每日一笑' @click="show3 = true" />
      <van-overlay :show="show3" @click="show3 = false">
        <div class="wrapper" @click.stop>
          <div class="block" style="overflow: hidden;padding: 10px;border-radius: 5px">
            <p v-html="count" style="text-indent: 2rem">{{count}}</p>
            <button style="float: left" @click="trans">换一个</button>
            <button @click="show3 = false" style="float: right">关闭</button>
          </div>
        </div>
      </van-overlay>
      <van-cell title="更多设置" @click="setMore" is-link to=""/>
    </div>
  </div>
</template>

<script>
// import { ShareSheet } from 'vant';
import MyNav from "@/components/MyNav";
import { Toast } from 'vant';
import {epidemic, getUserInfo, joke, setUserInfo} from "@/api/http";
export default {
  name: "MineView",
  components:{
    MyNav,
  },
  data() {
    return {
      //弹出层
      show: false,
      //修改简介
      show1:false,
      remark:'',
      //天气
      show2:false,
      city:'',
      list:[],
    //  每日笑话
      show3: false,
      count:''
    };
  },
  methods: {
    //提示信息
    showPopup() {
      this.show = true;
    },
    //修改简介
    showPopup1(){
      this.show1=true;
    },
    onSubmit1(values) {
      console.log(values);
      this.show1=false;
      setUserInfo('remark',values.remark).then(res=>{
        console.log(res)
        getUserInfo().then(res=>{
          console.log(res)
          this.$store.commit('changeUserInfo',res.data);
        })
      })

    },

  //  更多设置
    setMore(){
      Toast('没想到吧，我没有设置');
    },
  //  未登录的提示
    tips(){
      Toast('请先登录');
    },
  //  天气
    press(){
      epidemic(this.city).then(res=>{
        console.log(res)

        if(res.code != 1){
          Toast.fail('输入城市错误！');
          return false
        }else {
          this.list = res.data
        }
      })
    },
    //笑话
    trans(){
      joke().then(res=>{
        console.log(res)
        this.count = res.data[0].content
      })
    },
  //  点赞
    likes(){
      Toast.fail('该功能尚未开发')
    }
  },
  created(){
    joke().then(res=>{
      console.log(res)
      this.count = res.data[0].content
    })
  },
}
</script>

<style scoped lang="less">
header {
  padding: 20px 0 15px 0;
  background-color: #c4dae6;
  border-bottom: 1px solid #ddd;
  .pic {
    text-align: center;
  }

  .nickname {
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
  }
}
/deep/ .van-col {
  text-align: center;
}
.aboutUs {
  margin-top: 40px;
  margin-left: 20px;
  font-size: 24px;
}
.link {
  border-top: 1px solid #eee;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 80%;
  margin: auto;
  //height: 120px;
  background-color: #fff;
}
.backcolor p{
  background-color:whitesmoke;
  padding: 5px;
}
</style>